<template>
  <div class='Login'>
    
    <div class="w-20 py-2 px-4 bg-red-500 text-white text-center font-semibold rounded-lg shadow-md">登录</div>


    <div class="flex flex-row">
    <div class="basis-1/4">01</div>
    <div class="basis-1/4">02</div>
    <div class="basis-1/2">03</div>
    </div>
    

    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
     <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.5tu.cn%2Fuploads%2Fallimg%2F1706%2Fpic_5tu_big_201705201558243571.jpg&refer=http%3A%2F%2Fpic.5tu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637733958&t=28299dabd6e0330e876dcf7195742f1f" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">验证tailwindcss</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Finding customers for your new business
      </a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
      </p>
    </div>
  </div>
</div>


<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

  <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>

    <div class="colordata">sass scss cesh</div>


  </div>
</template>

<script setup>

   const tableData = [
  {
    date: '2016-05-03',
    name: '验证elementPlus',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

import {onMounted} from 'vue'
import { codeRequest } from '@/apis/api/user'
// 测试请求
const GetUser = () => {
  codeRequest().then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
}
onMounted(() => {
  GetUser()
})
</script>

<style scoped lang='scss'>
$color-primary: teal;

.colordata{
  color:$color-primary
}
</style>